import React, {
    useCallback,
    useMemo
} from 'react';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import './App.css'

// 预备公共组件
import Header from '../common/Header/Header'
import CitySelector from '../common/CitySelector/CitySelector';

// 私有组件
import Journey from './components/Journey/Journey';
import DepartDate from './components/DepartDate/DepartDate';
import DateSelector from './components/DateSelector/DateSelector'
import HighSpeed from './components/HighSpeed/HighSpeed';
import Submit from './components/Submit/Submit'

import { h0 } from '../common/fp'

//从actions中取出常量
import {
    exChangeFromTo,
    showCitySelector,
    hideCitySelector,
    fetchCityData,
    setSelectedCity,
    showDateSelector,
    hideDateSelector,
    setDepartDate,
    toggleHighSpeed,
} from './actions'




function App(props) {
    const {
        from,
        to,
        isCitySelectorVisible,
        isDateSelectorVisible,
        cityData,
        isLoadingCityData,
        highSpeed,
        // 这个dispatch从哪来
        dispatch,
        departDate,
    } = props;
    console.log(dispatch)


    //使用useCallBack,避免子组件Header重复渲染
    const onBack = useCallback(() => {
        window.history.back();
    }, [])

    const cbs = useMemo(() => {
        return bindActionCreators({
            exChangeFromTo,
            showCitySelector,
            hideCitySelector
        }, dispatch);
    }, [])

    const citySelectorCbs = useMemo(() => {
        return bindActionCreators({
            onBack: hideCitySelector,
            fetchCityData,
            //城市回填
            onSelect: setSelectedCity,
        }, dispatch)
    }, [])



    const departDateCbs = useMemo(() => {
        return bindActionCreators({
            onClick: showDateSelector,
        }, dispatch)
    }, [])

    const dateSelectorCbs = useMemo(() => {
        return bindActionCreators({
            onBack: hideDateSelector,
        }, dispatch);
    }, []);


    const onSelectDate = useCallback((day) => {
        if (!day) {
            return;
        }
        if (day < h0()) {
            return;
        }
        dispatch(setDepartDate(day));
        dispatch(hideDateSelector())
    }, [])


    const highSpeedCbs = useMemo(() => {
        return bindActionCreators({
            toggle: toggleHighSpeed
        }, dispatch)
    }, [])


    return (
        <div>
            <div className="header-wrapper">
                {/* 之所以加这层div是为了复用,避免写死  方便写样式，使之固定置顶 */}
                <Header title="火车票" onBack={onBack} />
            </div>
            {/* 因为此页面所有的数据要用表单提交，所以在此添加一个表单 */}
            <form from="./query.html" className="form">
                <Journey
                    from={from}
                    to={to}
                    {...cbs}
                />
                <DepartDate
                    time={departDate}
                    {...departDateCbs}
                />
                <HighSpeed
                    highSpeed={highSpeed}
                    {...highSpeedCbs}
                />
                <Submit />
            </form>
            <CitySelector
                show={isCitySelectorVisible}
                cityData={cityData}
                isLoading={isLoadingCityData}
                {...citySelectorCbs}
            />
            <DateSelector
                show={isDateSelectorVisible}
                {...dateSelectorCbs}
                onSelect={onSelectDate}
            />
        </div>
    )
}


export default connect(
    function mapStateToProps(state) {
        return state
    },
    function mapDispatchToProps(dispatch) {
        return { dispatch }
    }
)(App)